<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="40%">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120"
    >
      <div class="flex ml-50px mb-20px font-bold">
        <div class="flex w-1/3 px-20px">
          <span>场次：</span>
          <el-tooltip effect="dark" placement="top-start" :content="detailData?.sessionCode">
            <span class="flex-1 self-ellipsis">{{ detailData?.sessionCode }}</span>
          </el-tooltip>
        </div>
        <div class="flex w-1/3 px-20px">
          <el-tooltip effect="dark" placement="top-start" :content="detailData?.coalName">
            <span class="flex-1 self-ellipsis">{{ detailData?.coalName }}</span>
          </el-tooltip>
        </div>
        <div class="flex max-w-1/3 px-20px">
          <el-tooltip effect="dark" placement="top-start" :content="detailData?.tradingAmount">
            <span class="flex-1 self-ellipsis">{{ detailData?.tradingAmount }}</span>
          </el-tooltip>
          吨
        </div>
      </div>
      <el-form-item
        :label="`${type === 1 ? '报价' : type === 2 ? '挂牌价格' : ''}(元/吨)`"
        :prop="`${type === 1 ? 'quotePrice' : ''}`"
      >
        <el-input
          :disabled="type === 2"
          v-model="formData.quotePrice"
          :maxlength="7"
          @keyup.enter="submitForm"
          :placeholder="`${type === 1 ? '请输入报价金额' : ''}`"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as bidding from '@/api/bidding'
import { validatequoteAmount } from '@/utils/validatorUtil'
import * as Utils from '@/utils/dict'
import { number } from 'vue-types'

const emit = defineEmits(['success'])
const { DICT_TYPE, getDictLabel } = reactive(Utils)
const formRef = ref()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const type = ref()
const formData: Record<string, any> = ref({
  quotePrice: undefined
})
const props = defineProps({
  maxPrice: {
    type: number,
    default: 0
  }
})
const detailData = ref()

const validQuotePrice = (rule, value, callback) => {
  if (value < detailData.value?.startingPrice) {
    return callback(new Error('当前报价不能小于起拍价格'))
  }
  if (detailData.value?.tradingWay === 1 && value <= props.maxPrice) {
    return callback(new Error('当前报价必须大于最高报价'))
  }
  callback()
}

const formRules = reactive({
  quotePrice: [
    { required: true, message: '报价不能为空', trigger: 'blur' },
    { validator: validatequoteAmount, trigger: 'blur' },
    { validator: validQuotePrice, trigger: 'blur' }
  ]
})

const open = async (data: Record<string, any>) => {
  resetFn()
  dialogVisible.value = true
  type.value = data.type
  if (type.value === 1) {
    dialogTitle.value = '报价'
  } else {
    dialogTitle.value = '购买'
  }
  detailData.value = data?.data
  if (type.value === 2) {
    formData.value.quotePrice = data?.data?.startingPrice
  } else {
    formData.value.quotePrice = undefined
  }
}

const submitForm = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    await bidding.quotePrice({ id: detailData.value.id, ...formData.value })
    message.success(type.value === 1 ? '报价成功' : '购买成功')
    dialogVisible.value = false
    resetFn()
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const resetFn = () => {
  detailData.value = null
  formData.value.quotePrice = undefined
  formRef.value?.resetFields()
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.text-box {
  font-weight: bold;
  margin: 0 0 20px 80px;
}
</style>
